<template>
  <main-card :title="pageTitle" :crumbs="crumbs" :loading="loadingShow" :flex-start="true">
    <template #subheading>
      <p class="subtitle">{{ routerParam.description }}</p>
    </template>
    <template #screen-space>
      <div class="flex screen-wrap mt--9">
        <a-select
          v-model:value="selectFileType"
          class="w-111"
          :loading="selectLoading"
          placeholder="请选择文件类型"
          :options="fileTypeOptions"
          :field-names="{ label: 'typeName', value: 'typeCode' }"
          @select="handleFileTypeSelect"
          @change="onTableChange"
        />
        <div v-show="isShowFastDown" class="ml-8 fast-down-wrap">
          <p class="text">共 {{ pageForm.total }} 条数据</p>
          <a-button type="link" @click="handleAllDownByType">全部下载</a-button>
        </div>
        <a-input
          v-model:value="inputName"
          v-trim
          class="ml-auto w-328 h-36"
          allow-clear
          placeholder="请输入文件名称"
          @keyup.enter="handleFileTypeSelect"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>
      </div>
    </template>
    <template #tool-btn>
      <div class="flex right-button-list">
        <a-button type="text" style="width: 36px" class="icon-only-btn" @click="fileTaskStore.changeTaskListOptions({ open: true })">
          <i class="iconfont icon-tasklist-line"></i>
        </a-button>
        <a-button v-if="checkPermissions(dataSetDetail?.createType, dataSetDetail?.readOnly)" @click="handleOpenDirectoryModal('add')">
          创建文件夹
        </a-button>
        <a-dropdown placement="bottom">
          <a-button
            v-if="checkPermissions(dataSetDetail?.createType, dataSetDetail?.readOnly)"
            type="primary"
            size="middle"
            class="icon-with-btn"
          >
            上传
            <i class="iconfont icon-arrow-down-s-line"></i>
          </a-button>
          <template #overlay>
            <a-menu>
              <label for="uploadFile">
                <a-menu-item>
                  <li class="menu-icon-item">
                    <span>上传文件</span>
                    <input id="uploadFile" ref="uploadFileRef" type="file" multiple hidden @change="onFileChange" />
                  </li>
                </a-menu-item>
              </label>
              <label for="uploadDir">
                <a-menu-item>
                  <li class="menu-icon-item">
                    <span>上传文件夹</span>
                    <input
                      id="uploadDir"
                      ref="batchUploadFileRef"
                      type="file"
                      hidden
                      webkitdirectory
                      directory
                      mozdirectory
                      odirectory
                      @change="changeFileDir"
                    />
                  </li>
                </a-menu-item>
              </label>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </template>

    <div class="">
      <a-table
        :style="{ width: '100%' }"
        :columns="tableColumns"
        :data-source="dataList"
        :pagination="false"
        :loading="loading"
        row-key="id"
        :row-selection="{ selectedRowKeys: tableSelect, onChange: onSelectChange }"
        :custom-row="r => ({ onClick: () => handleToDetail(r) })"
        @change="tableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'size'">
            {{ record.type === '文件夹' ? '/' : sizeFilter(Number(record.size)) }}
          </template>
          <template v-else-if="column.dataIndex === 'createTime'">
            {{ dateFormat(record?.createTime) }}
          </template>
          <template v-else-if="column.dataIndex == 'tools'">
            <div class="table-btn-list">
              <template v-if="checkPermissions(dataSetDetail?.createType, dataSetDetail?.readOnly)">
                <a-button v-if="record.type === '文件夹'" type="link" @click.stop="handleOpenDirectoryModal('edit', record)">编辑</a-button>
              </template>
              <a-button v-if="record.type !== '文件夹'" type="link" @click.stop="handleAction(record, 'preview')">预览</a-button>
              <a-button type="link" @click.stop="handleAction(record, 'download')"> 下载 </a-button>
              <a-button
                v-if="checkPermissions(dataSetDetail?.createType, dataSetDetail?.readOnly)"
                type="link"
                @click.stop="handleAction(record, 'delete')"
              >
                删除
              </a-button>
            </div>
          </template>
          <template v-else>
            <span :title="replaceEmptyStr(record[column.dataIndex as string])">
              {{ replaceEmptyStr(record[column.dataIndex as string]) }}
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />

    <template #page-footer>
      <transition>
        <div v-if="tableSelect.length" class="footer" @click.stop>
          <div class="deselect-all" @click="uncheck">取消选中</div>
          <div class="number-of-selected">已选{{ tableSelect.length }}条</div>
          <div
            v-if="checkPermissions(dataSetDetail?.createType, dataSetDetail?.readOnly)"
            class="batch-deletion"
            @click="batchDeletionOfIDs"
          >
            批量删除
          </div>
          <div class="batch-download" @click="batchDownload">批量下载</div>
        </div>
      </transition>
    </template>
  </main-card>
  <directory-form-modal ref="directoryFormModalRef" @ok="handleDirectoryFormModalOk" />
  <preview-modal ref="previewModalRef" />
  <delete-confirm-dialog
    v-model:show="isDeleteDialogShow"
    msg="此文件夹及其包含的所有数据文件将被删除，请确认操作"
    label="请输入文件夹名称"
    :loading="confirmLoading"
    :confirm-name="currentDeleteTaskItem?.taskName"
    @ok="deleteTask"
  />
</template>

<script setup lang="ts">
  import { message, Modal, TableProps } from 'ant-design-vue'
  import { dateFormat, debounce, sizeFilter } from 'g6-fn'
  import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import { useFileTaskStore } from '@/components/FileTaskCard/upload-store'
  import { TaskListOptions } from '@/components/FileTaskCard/upload-store'
  import MainCard, { Crumb } from '@/components/MainCard/index.vue'
  import PreviewModal from '@/components/PreviewModal/index.vue'
  import useList from '@/hooks/use-list'
  import { customerMyDateSetApi } from '@/services/api'
  import { countStrToBit, replaceEmptyStr, replaceUrlParam } from '@/utils'
  import { filterTableColumns } from '@/utils/ant-component'
  import { checkPermissions } from '@/utils/share'

  import DirectoryFormModal from '../../../customer/data-set/components/DirectoryFormModal/index.vue'
  import {
    BucketInfoDirRes,
    BucketInfoRes,
    BucketInfoResVO,
    DownloadType,
    FileTypeOptions,
    FindId,
    RouteType,
    TableListType,
    TaskType
  } from '../types/my-data'

  type TierInfo = {
    id: string
    name: string
  }

  type UserAction = 'download' | 'delete' | 'preview'

  const fileTaskStore = useFileTaskStore()
  const route = useRoute()
  const router = useRouter()
  const dataSetDetail = ref()

  // let bucketId = route.params.id as string

  let routerParam = ref<RouteType>({
    name: '',
    pid: 0,
    description: 'asd'
  })

  // 获取id
  routerParam.value.bucketId = route.params.id as string

  // 通过id查询当前的数据
  const unsubscribe = fileTaskStore.pubSub.subscribe('changeTaskListOptions', (e: TaskListOptions) => {
    console.log(e, 'TaskListOptions')
    if (!e.open) {
      handleTaskCardClose()
    }
  })

  /*---------------------------------------- 面包削 --------------------------------------------- */
  const crumbs = ref<Crumb[]>([{ name: '我的数据集', path: '/my-data-manage/list' }, { name: routerParam.value.name }])
  const pageTitle = computed(() => crumbs.value[crumbs.value.length - 1].name)
  const selectLoading = ref(false)

  const selectFileType = ref('')
  const fileTypeOptions = ref<FileTypeOptions[]>([
    {
      typeName: '全部类型',
      typeCode: ''
    }
  ])
  const handleFileTypeSelect = () => {
    getDataList({ type: selectFileType.value, pid: routerParam.value.pid, offset: 1, name: inputName.value })
  }

  //取消选中
  const uncheck = (): void => {
    tableSelect.value = []
  }

  const tableColumns = ref(
    filterTableColumns([
      {
        title: '文件名',
        dataIndex: 'name'
      },
      {
        title: '文件类型',
        dataIndex: 'type',
        width: 200
      },
      {
        title: '文件大小',
        isSort: true,
        dataIndex: 'size',
        width: 200
      },
      {
        title: '创建时间',
        isSort: true,
        dataIndex: 'createTime',
        width: 200
      },
      {
        title: '操作',
        width: 200,
        dataIndex: 'tools'
      }
    ])
  )

  const handleToDetail = (item: BucketInfoRes) => {
    if (item.type !== '文件夹') {
      return
    }
    router.push({
      path: `/my-data-manage/detail/${routerParam.value.bucketId}`,
      query: {
        pid: item.id,
        groupName: routerParam.value.name
      }
    })
  }

  /*---------------------------------------------------------------- 文件夹新增/编辑 --------------------------------*/
  const directoryFormModalRef = ref<InstanceType<typeof DirectoryFormModal>>()
  const handleOpenDirectoryModal = (type: 'add' | 'edit', item?: BucketInfoResVO | any) => {
    directoryFormModalRef.value?.open({
      type,
      visible: true,
      title: type === 'add' ? '创建文件夹' : '编辑文件夹'
    })
    item && directoryFormModalRef.value?.setData(item)
  }

  const inputName = ref<string>()

  // 通过id去查询当前数据集的信息
  const { runAsync: idFindData } = useRequest<ResponseData<FindId>>(customerMyDateSetApi.idFind, {
    onSuccess: res => {
      dataList.value = []
      let routePid = route.query.pid as string | number
      let routeGroupName = route.query.routeGroupName as string
      dataSetDetail.value = res.data
      Object.assign(routerParam.value, {
        name: res.data.name,
        description: res.data.description,
        pid: routePid ? routePid : 0,
        groupName: routeGroupName ? routeGroupName : '我的数据集'
      })

      getTierInfo(routerParam.value.pid)
      getDataList({ pid: routerParam.value.pid })
    }
  })

  // 查询下拉列表数据
  const { runAsync: getSelectOptions } = useRequest<ResponseData<FileTypeOptions[]>>(customerMyDateSetApi.selectOption, {
    onSuccess: res => {
      fileTypeOptions.value = fileTypeOptions.value.concat(res.data)
    }
  })
  // 查询列表
  const { loading, pageForm, getDataList, dataList } = useList<TableListType, BucketInfoResVO[]>(
    customerMyDateSetApi.detail,
    {
      pid: routerParam.value.pid ? routerParam.value.pid : 0,
      isCommon: 2,
      bucketId: routerParam.value.bucketId
    },
    {
      afterCallback: () => {
        uncheck()
      }
    }
  )

  const { runAsync: runCreateDir } = useRequest(customerMyDateSetApi.createFile)
  const { runAsync: runUpdateDir } = useRequest(customerMyDateSetApi.editFile)
  // 提交文件夹表单
  const handleDirectoryFormModalOk = async (type: 'add' | 'edit', value: any) => {
    try {
      // const { name } = value
      directoryFormModalRef.value?.changeLoading(true)
      type === 'add'
        ? await runCreateDir({ bucketId: routerParam.value.bucketId, pid: routerParam.value.pid, name: value.name }, { isAddUid: true })
        : await runUpdateDir(
            { id: value.id, bucketId: routerParam.value.bucketId, pid: routerParam.value.pid, name: value.name },
            { isAddUid: true }
          )
      message.success(type === 'add' ? '创建成功' : '编辑成功')
      directoryFormModalRef.value?.changeLoading(false)
      directoryFormModalRef.value?.hide()

      uncheck()
      await getDataList()
    } catch (error) {
      directoryFormModalRef.value?.changeLoading(false)
    }
  }

  /*----------------------------------------- 删除 ----------------------------------------*/
  const isDeleteDialogShow = ref(false)
  const currentDeleteTaskItem = ref<TaskType>({
    id: '',
    taskName: ''
  })
  const { loading: confirmLoading, runAsync: runDelDir } = useRequest(customerMyDateSetApi.delDir)
  const deleteTask = async () => {
    try {
      await runDelDir({ id: currentDeleteTaskItem.value.id }, { isAddUid: true })
      isDeleteDialogShow.value = false
      currentDeleteTaskItem.value.taskName = ''
      message.success('删除成功')
      uncheck()
      await getDataList({ offset: 1 })
    } catch (err: any) {
      console.log(err)
      isDeleteDialogShow.value = false
    }
  }

  //批量删除
  const batchDeletionOfIDs = async (): Promise<void> => {
    Modal.confirm({
      title: '确定删除?',
      content: '所选数据删除后不可恢复',
      cancelText: '取消',
      okText: '确定',
      centered: true,
      onOk: async () => {
        await customerMyDateSetApi.deleteInBatches(
          {},
          { isAddUid: true, data: { idList: tableSelect.value, pid: routerParam.value.pid, bucketId: routerParam.value.bucketId } }
        )
        message.success(`删除成功`)
        tableSelect.value = []
        getDataList()
      }
    })
  }

  /*---------------------------------------------------------------- 下载 --------------------------------*/
  // 全部下载
  const { runAsync: downloadAllRequest } = useRequest<ResponseData<DownloadType>>(customerMyDateSetApi.downloadAll)
  const handleAllDownByType = async () => {
    let obj = {
      bucketId: routerParam.value.bucketId,
      name: inputName.value,
      type: selectFileType.value,
      pid: routerParam.value.pid
    }
    try {
      await downloadAllRequest(obj)
      fileTaskStore.changeTaskListOptions({
        open: true,
        key: '2',
        showDownFailed: false
      })
      message.success('成功添加至任务队列')
    } catch (error: any) {}
  }

  // 是否显示快捷下载
  const isShowFastDown = computed(() => {
    return pageForm.value.total > 0 && selectFileType.value !== '' && selectFileType.value !== '文件夹'
  })

  const batchDownload = async () => {
    await download(tableSelect.value as string[], 'batch')
  }

  /*---------------------------------------------------------------- 预览 --------------------------------*/
  const previewModalRef = ref<InstanceType<typeof PreviewModal>>()

  /*---------------------------------------------------------------- 上传 --------------------------------*/
  const onFileChange = (payload: any) => {
    const target = payload.target as any
    const files = target.files as File[]
    const address = getAddress()
    const bucketIdPid = routerParam.value.bucketId
    let addTaskNum = 0
    for (let index = 0; index < files.length; index++) {
      const file = files[index]
      if (countStrToBit(file.name) > 200) {
        continue
      }
      fileTaskStore.addFile(fileTaskStore.fileToFileInfo(file, { address, bucketId: bucketIdPid, pid: routerParam.value.pid }))
      addTaskNum++
    }
    target.value = ''
    message.success(`成功将${addTaskNum}个文件添加至任务队列`)
    handleOpenTaskList()
  }

  // 任务列表抽屉
  const handleOpenTaskList = () => {
    fileTaskStore.changeTaskListOptions({
      open: true,
      key: '1',
      showUploadFailed: false
    })
  }

  const changeFileDir = (payload: any) => {
    const target = payload.target as any
    let files = target.files as File[]
    const address = getAddress()
    const bucketIdPid = routerParam.value.bucketId
    let addTaskNum = 0

    const fileInfo = fileTaskStore.fileToDirectoryInfo(
      [...files],
      { address, bucketId: bucketIdPid, pid: routerParam.value.pid },
      (file, option) => {
        const pathChunk = file.webkitRelativePath.split('/')
        const isMeet = pathChunk.every(item => countStrToBit(item) <= 200)
        if (isMeet) {
          addTaskNum++
          return fileTaskStore.fileToFileInfo(file, { ...option })
        }
        return undefined
      }
    )
    addTaskNum > 0 && fileTaskStore.addDirectory(fileInfo)
    target.value = ''
    message.success(`成功将${addTaskNum}个文件添加至任务队列`)
    handleOpenTaskList()
  }
  const tierInfo = ref<TierInfo[]>([])

  // 获取当前层级位置
  const getAddress = () => {
    const str = tierInfo.value.map(item => item.name).join('/')
    return `${routerParam.value.groupName}/${routerParam.value.name}${str && '/' + str}`
  }

  const getTierInfo = async (id: string | number) => {
    try {
      crumbs.value = [{ path: '/my-data-manage/list', name: `我的数据集` }, { name: routerParam.value.name }]
      const { data } = await customerMyDateSetApi.getTierInfo(id)()
      tierInfo.value = data
      if (data.length === 0) {
        return
      }
      crumbs.value[1].path = window.location.pathname + replaceUrlParam(window.location.search, 'pid', '0')
      data.forEach((element: BucketInfoDirRes, index: number) => {
        const path = window.location.pathname + replaceUrlParam(window.location.search, 'pid', element.id as string)
        if (index === data.length - 1) {
          return crumbs.value.push({ name: element.name as string })
        }
        crumbs.value.push({ name: element.name as string, path })
      })
      if (crumbs.value.length > 6) {
        const delList = crumbs.value.splice(2, crumbs.value.length - 6)
        crumbs.value.splice(2, 0, { name: '...', overlay: delList } as any)
      }
    } catch (error) {
      console.log(error)
    }
  }

  /**********************************表格*************************************************/
  const tableSelect = ref<string[]>([])
  // 选择
  const onSelectChange = (e: any[]) => {
    console.time('onSelectChange')
    tableSelect.value = e
    nextTick(() => {
      console.timeEnd('onSelectChange')
    })
  }

  const downLoadFile = async (row: BucketInfoResVO): Promise<void> => {
    if (row.type === '文件夹') {
      await download([row.id], 'dir')
    } else {
      await download([row.id], 'file')
    }
  }
  const download = async (ids: string[], type: 'file' | 'dir' | 'batch'): Promise<void> => {
    const taskList = {
      file: () => customerMyDateSetApi.downloadInfo({ id: ids[0] }, { isAddUid: true, timeout: 300000 }),
      dir: () => customerMyDateSetApi.downloadDir({ id: ids[0] }, { isAddUid: true, timeout: 300000 }),
      batch: () =>
        customerMyDateSetApi.downloadBatch(
          { pid: routerParam.value.pid, bucketId: routerParam.value.bucketId, idList: ids },
          { isAddUid: true, timeout: 300000 }
        )
    }
    try {
      await taskList[type]()
      fileTaskStore.changeTaskListOptions({
        open: true,
        key: '2',
        showDownFailed: false
      })
      message.success('成功添加至任务队列')
    } catch (error: any) {}
  }
  const tableChange: TableProps<BucketInfoResVO>['onChange'] = (pagination, filters, sorter: any) => {
    pageForm.value.order = sorter.order === 'ascend' ? 'asc' : 'desc'
    pageForm.value.columns = sorter.field
    if (!sorter.order) {
      pageForm.value.columns = 'createTime'
      pageForm.value.order = 'desc'
    }
    getDataList({ offset: 1 })
  }
  // 删除表格中内容
  const deleteRowData = async (row: BucketInfoResVO): Promise<void> => {
    if (row.type === '文件夹') {
      // 删除单个文件夹
      isDeleteDialogShow.value = true
      currentDeleteTaskItem.value.id = row.id
      currentDeleteTaskItem.value.taskName = row.name
      return
    }
    Modal.confirm({
      title: '确定删除?',
      content: '所选数据删除后不可恢复',
      cancelText: '取消',
      okText: '确定',
      centered: true,
      onOk: async () => {
        await customerMyDateSetApi.delSignal({}, { urlParams: { id: row.id }, isAddUid: true })
        message.success('删除成功')
        tableSelect.value = []
        getDataList({ offset: 1 })
      }
    })
  }
  // 改变表格排序
  const onTableChange = (filters: any, sorter: any) => {
    let columns = sorter.field
    let order = sorter.order === 'ascend' ? 'asc' : ('desc' as any)
    if (!sorter.order) {
      columns = 'createTime'
      sorter.order = 'desc'
    }
    getDataList({ offset: 1, order, columns })
  }

  const previewTitle = ref<string>('')
  const previewCategory = ref<string>('')
  const format = ref<string | undefined>('')
  const loadingShow = ref<boolean>(false)
  // 预览
  const previewRowData = async (row: BucketInfoResVO): Promise<void> => {
    previewCategory.value = getFileType(row.name)
    format.value = row.name.split('.').pop()?.toLowerCase()
    loadingShow.value = true
    try {
      const { data } = await customerMyDateSetApi.previewArea(row.id)()

      previewTitle.value = row.name
      if (previewCategory.value === 'Text') {
        const text = await getUrlText(data)
        previewModalRef.value?.open({
          type: 'text',
          text: text,
          title: previewTitle.value
        })
      } else if (previewCategory.value === 'Video') {
        previewModalRef.value?.open({
          type: 'video',
          url: data,
          title: previewTitle.value
        })
      } else if (previewCategory.value === 'Image') {
        previewModalRef.value?.open({
          type: 'image',
          url: data,
          title: previewTitle.value
        })
      }
    } finally {
      loadingShow.value = false
    }
  }

  //获取文件类型
  const getFileType = (fileName: string): string => {
    const fileExtension = fileName.split('.').pop()?.toLowerCase()
    if (fileExtension) {
      switch (fileExtension) {
        case 'txt':
          return 'Text'
        case 'json':
          return 'Text'
        case 'jpg':
        case 'jpeg':
        case 'png':
          return 'Image'
        case 'mp4':
        case 'mov':
        case 'avi':
        case 'mkv':
        case 'flv':
          return 'Video'
        default:
          return 'Unknown'
      }
    }
    return 'Unknown'
  }

  const getUrlText = async (url: string) => {
    const res = await fetch(url)
    const text = await res.text()
    return text
  }
  const actions: Record<UserAction, (row: BucketInfoResVO) => Promise<void>> = {
    download: downLoadFile,
    delete: deleteRowData,
    preview: previewRowData
  }
  const handleAction = debounce(async (row: BucketInfoResVO, status: UserAction): Promise<void> => {
    const action = actions[status]
    if (action) {
      await action(row)
    } else {
      return
    }
  }, 500)
  // 监听路由变化
  const showTable = ref(true)
  const routeWatch = watch(
    () => route.params,
    () => {
      uncheck()
      if (route.path !== '/admin/data-manage/details-list') {
        return
      }
      showTable.value = false
      routerParam.value.pid = JSON.parse(route.query.obj as string).pid
      nextTick(() => {
        showTable.value = true
        getTierInfo(routerParam.value.pid)
        if (routerParam.value.pid === 0) {
          getDataList({ pid: routerParam.value.pid, offset: 1, name: '', type: '', columns: '', order: 'desc' })
        }
      })
    },
    {
      deep: true
    }
  )

  const handleTaskCardClose = () => {
    uncheck()
    getDataList()
  }
  onMounted(() => {
    idFindData({ id: routerParam.value.bucketId })
    getSelectOptions()
  })
  onUnmounted(() => {
    unsubscribe()
    routeWatch()
  })
</script>

<style lang="less" scoped>
  @import '../styles/index.less';

  .table-btn-list {
    display: flex;
    gap: 16px;
  }

  .footer {
    display: flex;
    align-items: center;
    padding: 8px 0;
    width: 100%;
    height: 52px;
    font-size: 14px;
    text-align: center;
    background: #fff;
    box-shadow: 0 -1px 3px rgba(37, 37, 45, 0.2);
    line-height: 36px;

    .deselect-all {
      width: 124px;
      height: 100%;
      color: #009cf8;
      border-right: 1px solid #e8e8eb;

      &:hover {
        cursor: pointer;
      }
    }

    .number-of-selected {
      width: 121px;
      height: 100%;
      color: rgba(16, 16, 20, 0.95);
    }

    .batch-deletion {
      margin-right: 8px;
      width: 88px;
      height: 36px;
      background: #fff;
      border: 1px solid #d9d9db;
      border-radius: 6px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);

      &:hover {
        cursor: pointer;
      }
    }

    .batch-download {
      width: 88px;
      height: 36px;
      background: #fff;
      border: 1px solid #d9d9db;
      border-radius: 6px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);

      &:hover {
        cursor: pointer;
      }
    }
  }

  .example {
    text-align: center;
    // background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    // margin-bottom: 20px;
    // padding: 30px 50px;
    // margin: 20px 0;
  }

  :deep(.ant-image) {
    img {
      height: 700px;
      object-fit: contain;
    }
  }

  :deep(.ant-modal-content) {
    padding: 6px;
    border-radius: 4px;
  }

  .preview-text {
    overflow-y: auto;
    padding: 0 0 0 15px;
    height: 700px;
    text-align: left;
    white-space: pre-wrap;
  }

  .videoPre {
    height: 700px;
    // object-fit: contain;
    background-color: #000;
    border-radius: 4px;
  }

  video {
    height: 700px;
    background-color: #000;
    border-radius: 4px;
    object-fit: contain;
  }

  .modalTitle {
    overflow: hidden;
    width: 930px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fast-down-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 206px;
    height: 36px;
    background: @background2;
    border: 1px solid @border1;
    border-radius: 6px;

    > p {
      display: flex;
      align-items: center;

      &::after {
        display: block;
        margin: 0 16px;
        width: 1px;
        height: 16px;
        background: @border1;
        content: '';
      }
    }
  }

  :deep(.ant-btn-icon-only) {
    width: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .right-button-list {
    gap: 8px;
  }
</style>
